<template>
  <div class="title_spec" :style="'background-color: ' + color_idx">
    <el-button-group class="ml-4">
      <el-button type="success" size="small" plain class="btn_refresh"
                 @click="get_spec_by_session_token">刷新
      </el-button>
      <el-button type="danger" size="small" plain class="btn_refresh" disabled>保存
      </el-button>
    </el-button-group>
    <span>{{ title_spec }}</span>
  </div>
  <div id="spec_show" v-loading="loading_spec_show">
    <codemirror
        v-model="spec_str"
        placeholder="Code goes here..."
        :style="{ height: '400px' }"
        :autofocus="true"
        :indent-with-tab="true"
        :tab-size="2"
        :extensions="extensions"
    />
  </div>

</template>

<script>
import axios from 'axios'
import randomFunction from '@/utils/random'
import {Codemirror} from 'vue-codemirror'
import {javascript} from '@codemirror/lang-javascript'
import {oneDark} from '@codemirror/theme-one-dark'

export default {
  name: "readerForSPEC_EditorMirror",
  components: {Codemirror},
  props: {
    sessionToken: String,
    searchKeyWord: {
      type: String,
      default: ""
    },
    colorIdx: {
      type: String,
      default: "#8cc5ff"
    },
    titleSPEC: {
      type: String,
      default: ""
    },
    codeSource: {
      type: String,
      default: "gitee"
    },
    spec_path: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      spec_lines: [],
      spec_str: "",
      search_keyword: "",
      color_idx: "",
      title_spec: "",
      idx_random: "",
      idx_width: "30px",
      loading_spec_show: true,
      extensions: [javascript(), oneDark],
      log: console.log
    }
  },
  methods: {
    get_spec_by_session_token() {
      if (this.spec_path === "") return
      let obj_this = this
      obj_this.loading_spec_show = true
      let data = {
        "session_token": obj_this.sessionToken,
        "spec_path": obj_this.spec_path,
      }
      axios.post('/get_spec_by_session_token', data).then(function (response) {
        obj_this.spec_lines = response.data.data
        obj_this.spec_str = response.data.data_str
        console.log(response)
        obj_this.idx_width = obj_this.spec_lines.length.toString().length * 11 + "px"
        obj_this.loading_spec_show = false
      }).catch(function (error) { // 请求失败处理
        console.log(error);
      }).then(function () {

      });
    },
  },
  created() {
    this.get_spec_by_session_token()
    this.color_idx = this.colorIdx
    this.title_spec = this.titleSPEC
    this.idx_random = randomFunction.getRandomString(5)
    let style = document.createElement('style')
    style.type = 'text/css';
    style.innerHTML = ".search_line_" + this.idx_random + "{background-color: #ffd4d4;}"
    document.querySelector("head").appendChild(style)
  },
  watch: {}
}
</script>

<style scoped>
#spec_show {
  /*max-height: 200px;*/
  overflow: auto;
}

.line_idx {
  width: 30px;
  display: inline-block;
  text-align: right;
  padding-right: 3px;
  user-select: none;
}

.title_spec {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-indent: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.btn_refresh {
  margin-top: -4px;
  margin-right: 5px;
  opacity: 0.8;
  transition: 0.5s;
}

.btn_refresh:hover {
  opacity: 1;
}

.search_line {
  background-color: #ffd4d4;
}
</style>